<template>
<div>
<h2>tag标签tip</h2>
    	<h4>type类型：blue red yellow green dark-blue purple</h4>
    	<h4>点击事件 @click</h4>
    	<hr>
<h2>1.白底色标签</h2>
&nbsp;&nbsp;&nbsp;&nbsp;<at-tag type="blue">下载</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="green" @click="test">漏洞修复</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="yellow">全网追溯</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-yellow">文件深度鉴定</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="red">目标审计</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-red">恶意代码清除</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<h2>2.纯底色标签</h2>
&nbsp;&nbsp;&nbsp;&nbsp;<at-tag type="blue-b">下载</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="green-b" @click="test">漏洞修复</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="yellow-b">全网追溯</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-yellow-b">文件深度鉴定</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="red-b">目标审计</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-red-b">恶意代码清除</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<h2>3.白底色定宽标签</h2>
&nbsp;&nbsp;&nbsp;&nbsp;<at-tag type="yellow-c">轻&nbsp;危</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="orange-c" @click="test">低&nbsp;危</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-orange-c">中&nbsp;危</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="red-c">高&nbsp;危</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="dark-red-c">严&nbsp;重</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<h2>4.纯底色定宽标签</h2>
&nbsp;&nbsp;&nbsp;&nbsp;<at-tag type="dark-orange-d">未复</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="red-d" @click="test">复发</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="yellow-d">新增</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="blue-d">更新</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="orange-d">重保</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<h2>5.圆形标签</h2>
&nbsp;&nbsp;&nbsp;&nbsp;<at-tag type="red-e">流行</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<at-tag type="red-e" @click="test">新兴</at-tag>&nbsp;&nbsp;&nbsp;&nbsp;
<h2>6.可关闭标签</h2>
<at-tag
  v-for="tag in tags"
  :key="tag.name"
  :closable="true"
  :close-transition="false"
  :type="tag.type"
  @close="handleClose(tag)"
>
{{tag.name}}
</at-tag>
</div>
</template>

<script>
	export default{
		data() {
	      return {
	        tags: [
	          { name: '标签一', type: '' },
	          { name: '目标审计', type: 'blue' },
	          { name: '恶意代码清除', type: 'red' },
	          { name: '全网追溯', type: 'yellow' },
	          { name: '漏洞修复', type: 'green' },
	          { name: '文件深度鉴定', type: 'dark-yellow' },
	          { name: '下载', type: 'blue' },
	          { name: '研判', type: 'red-c' }
	        ]
	      };
	    },
	    methods:{
	    	handleClose(tag) {
		        this.tags.splice(this.tags.indexOf(tag), 1);
		    },
		    test(){
		    	console.log('test')
		    }
	    }
	}
</script>
<style>
</style>